<template>
  <div>
    <h1>【aty-input】 component demo</h1>
    <p>【aty-input】 本质</p>
    <div class="fd-aty-input-box">
      <aty-row>
        <aty-title level="4">1.input全属性展示</aty-title>
        <aty-input
          elementId="jsInput"
          name="input"
          value="20"
          size="default"
          autocomplete="on"
          :spellcheck="true"
          type="text"
          placeholder="placeholder"
          :disabled="false"
          :maxlength="30"
          :readonly="true"
          :number="false"
          :autofocus="true"
          :clearable="true" />
      </aty-row>

      <aty-row>
        <aty-title level="4">2.Input 输入框,数据双向绑定,v-model可以清除</aty-title>
        <div class="fd-flex fd-flex-parent">
          <div>
            <span class="aty-fl">父组件：</span>
            <span v-text="value" class="aty-fl"></span>
          </div>
          <div class="fd-flex">
            <span class="aty-fl">子组件：</span>
            <aty-input
              id="elementId"
              type="text"
              v-model="value"
              placeholder="请输入..."
              :clearable="true">
              <div slot="label">label 测试</div>
            </aty-input>
          </div>
        </div>
        <!--fd-flex end-->
      </aty-row>

      <aty-row>
        <aty-title level="4">3.Input prepend</aty-title>
        <aty-input :clearable="true" elementId="jsInputPrepend">
          <div slot="prepend">前置内容</div>
        </aty-input>
      </aty-row>

      <aty-row>
        <aty-title level="4">4.Input append</aty-title>
        <aty-input :clearable="true" elementId="jsInputAppend">
          <div slot="append">后置内容</div>
        </aty-input>
      </aty-row>

      <aty-row>
        <aty-title level="4">5.Input 大小</aty-title>
        <div class="fd-flex fd-flex-parent">
          <aty-input size="small" placeholder="small  size" />
          <aty-input size="default" placeholder="default  size" />
          <aty-input size="large" placeholder="large  size" />
        </div>
      </aty-row>

      <aty-row>
        <aty-title level="4">6.Input 带Icon</aty-title>
        <aty-input icon="ios-clock-outline" placeholder="请输入..." />
      </aty-row>

      <aty-row>
        <aty-title level="4">7.Input 禁用状态 disabled</aty-title>
        <aty-input :disabled="true" placeholder="请输入..." />
      </aty-row>
      <aty-row>
        <aty-title level="4">8.Input validate 状态 </aty-title>
        <aty-input class="aty-form-item-validate" placeholder="请输入..." />
      </aty-row>
      <aty-row>
        <aty-title level="4">9.Input 错误状态 </aty-title>
        <aty-input class="aty-form-item-error" placeholder="请输入..." />
      </aty-row>

      <aty-row>
        <aty-title level="4">9.Input 错误状态 </aty-title>
        <aty-input type="number" placeholder="请输入..." />
      </aty-row>
    </div>
    <!--     <Test></Test>-->
  </div>
</template>
<script>
/*
 * import  Test from './form-item.vue';
 *  import  Artery from  "../../../utils/Artery.js";
 */
export default {
  //  components:{Test},
  data () {
    return {
      value: '带联动'
    }
  },
  methods: {
    input: function (value) {
      this.value = value
    },
    testOpen () {
      Artery.open()
    }
  },
  mounted () {
    setTimeout(() => {
      this.value = '吴惟刚'
    }, 2000)
    console.log(this.$refs.jsTest)
  }
}

</script>
<style  lang="less"  type="text/less"  >
    /*@import "~@/components/css/mixins/index.less";*/
    /*/!*出错*!/*/
    /*.input-error(aty-form-item);*/
    /*/!*确定中*!/*/
    /*.input-validate(aty-form-item);*/
    .fd-aty-input-box {
        padding: 30px;
        .aty-row {
            padding: 5px 0;
        }
        .fd-flex {
            display: flex;

            flex-wrap: nowrap;
            flex-direction: row;
            justify-content: center;
            align-items: center;

        }
        .fd-flex-parent>* {
            flex-grow: 0;
            flex-shrink: 0;
            flex-basis:  200px;
            white-space: nowrap;
        }
        .fd-test {
            margin: 0 auto;
            width: 600px;
            line-height: 32px;
        }
        .fd-test>input,
        .fd-test>div,
        .fd-test>span {
            float: left;
            margin-right: 5px;
            width: auto;
        }
    }
</style>
